import React, { Component } from 'react'
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import Header from "../../components/Header/Header"
import { Button, Form, Input } from "antd-mobile";
import { actions, getUser } from "../../store/modules/register";
import "./Register.less"
class Register extends Component {
    render() {
        const {user,registerFn:{changeUser,doRegister},history:{push}} = this.props;
        return (
            <div className="re">
                <Header title="注册" back></Header>
                <Form layout="horizontal">
                    <Form.Item label='手机号'>
                        <Input placeholder='请输入手机号' clearable 
                        onChange={(e) => changeUser("phone",e)}/>
                    </Form.Item>

                    <Form.Item label='昵称'>
                        <Input placeholder='请输入昵称' clearable 
                        onChange={(e)=> changeUser("nickname",e)}/>
                    </Form.Item>

                    <Form.Item label='密码'>
                        <Input placeholder='请输入密码' clearable 
                        onChange={(e)=> changeUser("password",e)}/>
                    </Form.Item>
                </Form>
                <div className="text-center">
                    <Button color="primary" onClick={()=>doRegister(push)}>注册</Button>
                </div>
            </div>
        )
    }
}

//取数据
const mapStateToProps = (state) => {
    return {
        user:getUser(state),
    };
}

//取方法
const mapDispatchToProps = (dispatch) =>{
    return {
        registerFn:bindActionCreators(actions,dispatch)
    };
}

export default connect(mapStateToProps,mapDispatchToProps)(Register)